.indexContainer{
  /* 轮播图 */
  .banner{
      width:100%;
      height: 300rpx;
      image{
          width:100%;
          height:100%;
      }
  }

  /* 导航 */
  .navContainer{
      display: flex;
      height:160rpx;
      .navItem{
          display: flex;
          flex-direction: column;
          align-items: center;
          width:20%;
      }

      /* 类选择器的权重比标签选择器要高 */
      .iconfont{
          width:100rpx;
          height:100rpx;
          border-radius: 50%;
          background-color: #d43c33;
          text-align: center;
          color:#fff;
          line-height: 100rpx;
          font-size: 36rpx;
          margin-top: 10rpx;
          margin-bottom: 10rpx;
      }

      text{
          font-size: 24rpx;
      }
  }

  /*  推荐 */
  .recommendContainer{
      padding:10rpx;

      .recommendScroll{
          display: flex;
          padding-top:20rpx;
          height:300rpx;

          .scrollItem{
              display: flex;
              flex-direction: column;
              width:200rpx;
              margin-right: 20rpx;
              image{
                  width: 200rpx;
                  height: 200rpx;
                  border-radius: 10rpx;
              }

              text{
                  font-size: 26rpx;
                  /*
                  单行文本溢出
                  隐藏
                  省略号
                  换行
                  块级元素
                  */
                 /*
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                  display: block;
                  */
                 /*
                 多行文本溢出

                 */
                   overflow: hidden;
                  text-overflow: ellipsis;
                  display: -webkit-box;
                  -webkit-box-orient: vertical;
                  -webkit-line-clamp: 2;
              }
          }
      }
  }

  /* 排行榜单 */
  .topList{
      padding:10rpx;

      .topListSwiper{
          padding-top:20rpx;
          height:480rpx;
         .swiperItem{
          display: flex;
          flex-direction: column;
          margin:10rpx;
          width:95%;
          background:#f5f5f5;
          height:400rpx;

          .musicInfo{
              display:flex;
              justify-content: flex-start;
              image{
                  width: 100rpx;
                  height: 100rpx;
                  border-radius: 10rpx;
              }

              .order{
                  width:100rpx;
                  height:100rpx;
                  line-height: 100rpx;
                  text-align: center;
              }

              .musicName{
                  height:100rpx;
                  line-height: 100rpx;
              }
              margin-bottom: 10rpx;
          }
         }

      }
  }
}